<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title></title>
  <script type='text/javascript' src='js/vue.js'></script>
</head>

<body>
  <div id='app'>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <input type="checkbox" v-model="item.flag">
        <span>{{ '品牌 \t' + item.name }}</span>
        <span>{{ '单价 \t' + item.price }}</span>
        <span>
          <input type="button" value="-" @click="item.num--">
          <input type="text" v-model="item.num" style="width: 30px; text-align: center;">
          <input type="button" value="+" @click="item.num++">
        </span>
      </li>
    </ul>
    <p>总价 {{ total }}</p>
  </div>
  <script type='text/javascript'>
    var vm = new Vue({
      el: '#app',
      data: {
        items: [{
          name: 'AJ',
          price: 2100,
          num: 2,
          flag: false
        }, {
          name: '361',
          price: 200,
          num: 3,
          flag: false
        }, {
          name: 'step',
          price: 99,
          num: 2,
          flag: false
        }, {
          name: 'Converse',
          price: 500,
          num: 1,
          flag: false
        }, {
          name: 'uniqlo',
          price: 100,
          num: 2,
          flag: false
        }, {
          name: 'HM',
          price: 88.8,
          num: 100,
          flag: false
        }],
        totalPrice: 0,
        aaa: 0.5
      },
      methods: {
      },
      computed: {
        total() {
          console.log('computed');
          this.totalPrice = 0;
          this.items.forEach(item => {
            if (item.flag) {
              this.totalPrice += (Number(item.num) * Number(item.price));
            }
          });
          this.aaa = 1;
          return this.totalPrice
        }
      },
    });
  </script>
</body>

</html>